<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <ChartCard>
          <template #chart-title>
            <div>
              {{ homeData["//1"] }}
            </div>
          </template>

          <template #chart-number>
            <div>
              {{ homeData.salesToday }}
            </div>
          </template>

          <template #charts>
            <div style="padding: 10px 0">
              <div style="font-size: 12px; font-weight: 700; padding: 4px 0">
                日同比:{{ homeData.salesGrowthLastDay }}
                <svg
                  t="1664440641098"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="5039"
                  width="10"
                  height="10"
                >
                  <path
                    d="M987.043172 1000.472648H760.73245V95.229759c0-17.925602 14.564551-31.369803 31.369803-31.369803H954.553019c17.925602 0 31.369803 14.564551 31.369803 31.369803l1.12035 905.242889z"
                    fill="#d81e06"
                    p-id="5040"
                  ></path>
                  <path
                    d="M1009.450174 1022.87965H738.325447V95.229759c0-14.564551 5.601751-28.008753 15.684902-38.091903 10.083151-10.083151 23.527352-15.684902 38.091904-15.684902H954.553019c30.249453 0 53.776805 24.647702 53.776805 53.776805v927.649891z m-226.310722-44.814004h181.496718V95.229759c0-5.601751-4.4814-8.962801-8.962801-8.962801H793.222603c-3.36105 0-5.601751 1.12035-6.722101 2.240701-1.12035 1.12035-2.2407 3.36105-2.2407 6.7221v882.835887z"
                    fill="#d81e06"
                    p-id="5041"
                  ></path>
                  <path
                    d="M621.809036 1001.592998H396.618664v-683.413567c0-15.684902 12.323851-26.888403 28.008753-26.888403H596.040984c15.684902 0 28.008753 12.323851 28.008752 26.888403-2.2407 0-2.2407 683.413567-2.2407 683.413567z"
                    fill="#d81e06"
                    p-id="5042"
                  ></path>
                  <path
                    d="M644.216038 1024H374.211662v-705.820569c0-28.008753 22.407002-49.295405 50.415755-49.295405H596.040984c28.008753 0 50.415755 22.407002 50.415754 49.295405v705.820569z m-225.190372-44.814004h181.496718v-661.006565c0-2.2407-2.2407-4.4814-5.601751-4.4814H423.507067c-2.2407 0-5.601751 2.2407-5.601751 4.4814v661.006565z"
                    fill="#d81e06"
                    p-id="5043"
                  ></path>
                  <path
                    d="M262.176651 1000.472648H35.865929V534.407002c0-12.323851 10.083151-22.407002 22.407002-22.407002h181.496718c12.323851 0 22.407002 10.083151 22.407002 22.407002v466.065646z"
                    fill="#d81e06"
                    p-id="5044"
                  ></path>
                  <path
                    d="M284.583653 1022.87965H13.458927V534.407002c0-24.647702 20.166302-44.814004 44.814004-44.814004h181.496718c24.647702 0 44.814004 20.166302 44.814004 44.814004v488.472648zM58.272931 978.065646h181.496718V534.407002H58.272931v443.658644z"
                    fill="#d81e06"
                    p-id="5045"
                  ></path>
                  <path
                    d="M173.668992 1022.87965c-12.323851 0-22.407002-10.083151-22.407002-22.407002V587.063457c0-12.323851 10.083151-22.407002 22.407002-22.407002s22.407002 10.083151 22.407002 22.407002v413.409191c0 13.444201-10.083151 22.407002-22.407002 22.407002zM532.181027 1022.87965c-12.323851 0-22.407002-10.083151-22.407002-22.407002V362.993435c0-12.323851 10.083151-22.407002 22.407002-22.407002s22.407002 10.083151 22.407002 22.407002v637.479213c0 13.444201-10.083151 22.407002-22.407002 22.407002z"
                    fill="#d81e06"
                    p-id="5046"
                  ></path>
                  <path
                    d="M890.693062 1022.87965c-12.323851 0-22.407002-10.083151-22.407002-22.407002V140.043764c0-12.323851 10.083151-22.407002 22.407002-22.407003s22.407002 10.083151 22.407002 22.407003v860.428884c0 13.444201-10.083151 22.407002-22.407002 22.407002z"
                    fill="#d81e06"
                    p-id="5047"
                  ></path>
                  <path
                    d="M309.231355 182.617068c-12.323851 0-22.407002-10.083151-22.407002-22.407002V44.814004H170.307942c-12.323851 0-22.407002-10.083151-22.407002-22.407002s10.083151-22.407002 22.407002-22.407002h160.210066v160.210066c1.12035 12.323851-8.962801 22.407002-21.286653 22.407002z"
                    fill="#d81e06"
                    p-id="5048"
                  ></path>
                  <path
                    d="M35.865929 320.420131c-5.601751 0-11.203501-2.2407-15.684902-6.7221-8.962801-8.962801-8.962801-22.407002 0-31.369803L293.546454 7.842451c8.962801-8.962801 22.407002-8.962801 31.369803 0 8.962801 8.962801 8.962801 22.407002 0 31.369803L51.55083 313.698031c-4.4814 4.4814-10.083151 6.722101-15.684901 6.7221z"
                    fill="#d81e06"
                    p-id="5049"
                  ></path>
                </svg>
              </div>
              <div style="font-size: 12px; font-weight: 700; padding: 4px 0">
                月同比:{{ homeData.salesGrowthLastMonth }}
                <svg
                  t="1664440593534"
                  class="icon"
                  viewBox="0 0 1427 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3961"
                  width="12"
                  height="12"
                >
                  <path
                    d="M275.821156 67.001091h161.919302C455.607415 67.001091 469.007634 81.517993 469.007634 98.268266v902.281352H244.55398V98.268266c0-16.750273 14.516903-31.267176 31.267176-31.267175z"
                    fill="#1afa29"
                    p-id="3962"
                  ></path>
                  <path
                    d="M492.458015 1024H222.220284V98.268266c0-30.150491 24.567067-53.600872 53.600872-53.600872h161.919302C467.890949 44.667394 491.34133 69.23446 491.34133 98.268266v925.731734z m-225.570338-44.667394h180.902945V98.268266c0-5.583424-4.466739-8.933479-8.933479-8.933479H275.821156c-5.583424 0-8.933479 4.466739-8.933479 8.933479v881.06434z"
                    fill="#1afa29"
                    p-id="3963"
                  ></path>
                  <path
                    d="M635.393675 292.571429h170.852781c15.633588 0 26.800436 12.283533 26.800436 27.917121v681.177753H607.476554v-681.177753c0-15.633588 12.283533-27.917121 27.917121-27.917121z"
                    fill="#1afa29"
                    p-id="3964"
                  ></path>
                  <path
                    d="M855.380589 1022.883315H585.142857v-703.51145c0-27.917121 22.333697-50.250818 50.250818-50.250818h170.852781c27.917121 0 50.250818 22.333697 50.250818 50.250818v703.51145z m-225.570338-44.667394h180.902944v-658.844056c0-2.23337-2.23337-5.583424-5.583424-5.583424H635.393675c-2.23337 0-5.583424 2.23337-5.583424 5.583424v658.844056z"
                    fill="#1afa29"
                    p-id="3965"
                  ></path>
                  <path
                    d="M989.38277 513.675027h179.786259c12.283533 0 22.333697 10.050164 22.333697 22.333697v465.657579H967.049073V536.008724c0-12.283533 10.050164-22.333697 22.333697-22.333697z"
                    fill="#1afa29"
                    p-id="3966"
                  ></path>
                  <path
                    d="M1213.836423 1024H944.715376V536.008724c0-24.567067 20.100327-44.667394 44.667394-44.667394h179.786259c24.567067 0 44.667394 20.100327 44.667394 44.667394v487.991276z m-224.453653-44.667394h179.786259V536.008724H988.266085l1.116685 443.323882z"
                    fill="#1afa29"
                    p-id="3967"
                  ></path>
                  <path
                    d="M1404.789531 1024H22.333697c-12.283533 0-22.333697-10.050164-22.333697-22.333697s10.050164-22.333697 22.333697-22.333697h1382.455834c12.283533 0 22.333697 10.050164 22.333697 22.333697s-10.050164 22.333697-22.333697 22.333697zM1155.768811 303.738277c-5.583424 0-11.166848-2.23337-15.633587-6.700109L879.947655 37.967285c-8.933479-8.933479-8.933479-22.333697 0-31.267176 8.933479-8.933479 22.333697-8.933479 31.267176 0l259.070883 259.070883c8.933479 8.933479 8.933479 22.333697 0 31.267176-3.350055 4.466739-8.933479 6.700109-14.516903 6.700109z"
                    fill="#1afa29"
                    p-id="3968"
                  ></path>
                  <path
                    d="M1182.569248 314.905125H1011.716467c-12.283533 0-22.333697-10.050164-22.333697-22.333696s10.050164-22.333697 22.333697-22.333697h126.185387V144.052345c0-12.283533 10.050164-22.333697 22.333697-22.333697s22.333697 10.050164 22.333697 22.333697v170.85278z"
                    fill="#1afa29"
                    p-id="3969"
                  ></path>
                  <path
                    d="M1055.267176 1024c-12.283533 0-22.333697-10.050164-22.333697-22.333697V589.609597c0-12.283533 10.050164-22.333697 22.333697-22.333697s22.333697 10.050164 22.333696 22.333697v412.056706c0 12.283533-10.050164 22.333697-22.333696 22.333697z"
                    fill="#1afa29"
                    p-id="3970"
                  ></path>
                  <path
                    d="M697.928026 1024c-12.283533 0-22.333697-10.050164-22.333697-22.333697v-636.51036c0-12.283533 10.050164-22.333697 22.333697-22.333697s22.333697 10.050164 22.333697 22.333697v635.393675c0 13.400218-10.050164 23.450382-22.333697 23.450382z"
                    fill="#1afa29"
                    p-id="3971"
                  ></path>
                  <path
                    d="M340.588877 1024c-12.283533 0-22.333697-10.050164-22.333697-22.333697V144.052345c0-12.283533 10.050164-22.333697 22.333697-22.333697s22.333697 10.050164 22.333697 22.333697v857.613958c0 12.283533-10.050164 22.333697-22.333697 22.333697z"
                    fill="#1afa29"
                    p-id="3972"
                  ></path>
                </svg>
              </div>
            </div>
          </template>

          <template #chart-footer>
            <div>昨日销售额 ￥ {{ homeData.salesLastDay }}</div>
          </template>
        </ChartCard>
      </el-col>
      <el-col :span="6">
        <ChartCard>
          <template #chart-title>
            <div>
              {{ homeData["//2"] }}
            </div>
          </template>

          <template #chart-number>
            <div>{{ homeData.orderToday }}</div>
          </template>

          <template #charts>
            <LineCard
              :orderTrend="homeData.orderTrend"
              :orderTrendAxis="homeData.orderTrendAxis"
            ></LineCard>
          </template>

          <template #chart-footer>
            <div>昨日订单量: {{ homeData.orderLastDay }}</div>
          </template>
        </ChartCard>
      </el-col>
      <el-col :span="6">
        <ChartCard>
          <template #chart-title>
            <div>{{ homeData["//3"] }}</div>
          </template>

          <template #chart-number>
            <div>{{ homeData.orderUser }}</div>
          </template>

          <template #charts>
            <BarCard
              :orderUserTrend="homeData.orderUserTrend"
              :orderUserTrendAxis="homeData.orderUserTrendAxis"
            ></BarCard>
          </template>

          <template #chart-footer>
            <div>退货率: {{ homeData.returnRate }}</div>
          </template>
        </ChartCard>
      </el-col>
      <el-col :span="6">
        <ChartCard>
          <template #chart-title>
            <div>{{ homeData["//4"] }}</div>
          </template>

          <template #chart-number>
            <div>{{ homeData.usersTotal }}</div>
          </template>

          <template #charts>
            <ProgressCard
              :usersLastMonth="homeData.usersLastMonth"
              :usersLastDay="homeData.usersLastDay"
            ></ProgressCard>
          </template>

          <template #chart-footer>
            <div>
              <span
                >日同比:{{ homeData.userGrowthLastDay }}
                <svg
                  t="1664508044265"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2540"
                  width="12"
                  height="12"
                >
                  <path
                    d="M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z"
                    p-id="2541"
                    fill="#d81e06"
                  ></path></svg
              ></span>
              <span
                >月同比:{{ homeData.userGrowthLastMonth
                }}<svg
                  t="1664508118654"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3517"
                  width="12"
                  height="12"
                >
                  <path
                    d="M573.056 272l308.8 404.608A76.8 76.8 0 0 1 820.736 800H203.232a76.8 76.8 0 0 1-61.056-123.392L450.976 272a76.8 76.8 0 0 1 122.08 0z"
                    p-id="3518"
                    fill="#1afa29"
                  ></path></svg
              ></span>
            </div>
          </template>
        </ChartCard>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="ChartTop">
import ChartCard from "@/views/Home/ChartTop/ChartCard/index.vue";
import LineCard from "@/views/Home/ChartTop/LineCard/index.vue";
import BarCard from "@/views/Home/ChartTop/BarCard/index.vue";
import ProgressCard from "@/views/Home/ChartTop/ProgressCard/index.vue";

defineProps(["homeData"]);
</script>

<style scoped></style>
